import React, { useEffect, useState } from 'react';
import { useRequest } from 'ahooks';
import { SearchBar, SideBar, Toast } from 'antd-mobile';
import './index.css';
import FundCard from '../FundCard';
import request from '../../request';
import { formattedDate } from '../../constants';
import { FundsObj } from '../../type';
import { Message } from 'zarm';

const Search = () => {
  const [fundsInfo, setFundsInfo] = useState<FundsObj>();

  const getFundsInfo = async (code: string) => {
    try {
      const res = await request.get(
        `https://api.doctorxiong.club/v1/fund/detail/list?code=${code}&startDate=${formattedDate}`,
      );
      console.log('res', res);
      setFundsInfo(res?.data?.data?.[0] ?? {});

      Toast.show({
        icon: 'success',
        content: '搜索成功',
      });
    } catch (e) {
      Toast.show({
        icon: 'fail',
        content: '搜索失败',
      });
    }
  };

  return (
    <div className={'Search-container'}>
      <SearchBar
        placeholder="请输入内容"
        onSearch={(value) => {
          getFundsInfo(value);
        }}
      />
      {fundsInfo?.code && <FundCard fundInfo={fundsInfo} />}
    </div>
  );
};
export default Search;
